<template>
  <div class="m-account-security">
    <p class="m-title">账户安全</p>
    <!-- 选项列表 -->
    <div class="m-list">
      <div class="item">
        <div class="title">
          <span>实名认证</span>
        </div>
        <div class="info">
          <p>保障账户安全，只有完成认证才能出借</p>
        </div>
        <div class="options">
          <span class="success" @click="$router.push('/my/certification')">未认证</span>
        </div>
      </div>
      <div class="item">
        <div class="title">
          <span>登录密码</span>
        </div>
        <div class="info">
          <p>登录投融网时需要输入密码</p>
        </div>
        <div class="options">
          <span class="success" @click="$router.push('/my/loginPwd')">修改</span>
        </div>
      </div>
      <div class="item">
        <div class="title">
          <span>邮箱绑定</span>
        </div>
        <div class="info">
          <p>保障账户安全</p>
        </div>
        <div class="options">
          <span class="success" @click="$router.push('/my/mail')">未绑定</span>
        </div>
      </div>
      <div class="item">
        <div class="title">
          <span>手机号码</span>
        </div>
        <div class="info">
          <p>173****8989</p>
        </div>
        <div class="options">
          <span class="success" @click="$router.push('/my/phoneEdit')">修改</span>
        </div>
      </div>
      <div class="item">
        <div class="title">
          <span>交易密码</span>
        </div>
        <div class="info">
          <p>交易时需要输入交易密码</p>
        </div>
        <div class="options">
          <span class="success" @click="$router.push('/my/tradePwd')">修改</span>
        </div>
      </div>
      <div class="item">
        <div class="title">
          <span>密保问题</span>
        </div>
        <div class="info">
          <p>密保问题用于找回密码</p>
        </div>
        <div class="options">
          <span class="success" @click="$router.push('/my/safeQuestion')">修改</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.m-title {
  font-size: 16px;
  margin-bottom: 20px; 
  font-weight: bold;
}
.m-list {
  .item {
    height: 60px;
    line-height: 60px;
    & > div {
      display: inline-block;
    }
    &:nth-child(odd) {
      background-color: #FAFAFA
    }
  }
  .title {
    width: 20%;
    text-align: center;
  }
  .info {
    width: 60%;
    text-align: left;
  }
  .options {
    width: 18%;
    text-align: center;
    .success {
      cursor: pointer;
      color: #2A98D7
    }
  }
}
</style>
